<!--
 * @Description: 订单tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-05 15:11:24
-->
<template>
  <div>
    <van-nav-bar title="我的工单"  />
    <van-tabs @click="tabClickHandler" v-model="active" color="skyblue">
      <van-tab title="进行中"></van-tab>
      <van-tab title="已完成"></van-tab>
    </van-tabs>
    <div class="orderList">
      <div class="box"
      v-for="(item, index) in orderList"
        :key="index"
        @click="$router.push({ path: '/orderDetails', query: { id: item.id } })">
        <div class="left">
          <img v-if="item.status == '进行中'" width="70px" src="../../assets/ordering.png" alt="">
          <img v-else width="70px" src="../../assets/orderfinish.png" alt="">
        </div>
        <div class="right">
          <div><strong>工单状态：</strong> <span v-if="item.status == '进行中'" style="color:blue;font-size:14px">{{ item.status }}</span> 
          <span v-if="item.status == '已完成'" style="color:green;font-size:14px">{{ item.status }}</span></div>
          <div><strong>工单类型：</strong>{{ item.type }}</div>
          <div><strong>申报时间：</strong><span style="font-size:15px">{{ item.create_time | datefmt }}</span></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data(){
    return{
      active: 0,
      orderList: [],
      params: {
        page: 1,
        pageSize: 500,
        status: "进行中",
      },
    }
  },
  methods:{
      // 查询工单
    getAllWorkerOrdersByType() {
      switch (this.active) {
        case 0:
          this.params.status = "进行中";
          break;
        case 1:
          this.params.status = "已完成";
          break;
      }
      get("/workorder/pageQuery", this.params).then((res) => {
        this.orderList = res.data.list;
      });
    },
    // tab标签点击处理函数
    tabClickHandler(name, title) {
        if (title == "进行中") {
        this.params = {
          page: 1,
          pageSize: 100,
          status: "进行中",
        };
      } else  {
        this.params.status = title;
      }
      this.getAllWorkerOrdersByType();
    },
  },
  created(){
    this.getAllWorkerOrdersByType();
  }
}
</script>
<style scoped>
.van-nav-bar {
 background-color: rgb(248, 247, 246);
}
.box {
  height: 95px;
  margin: 10px 20px;
  padding: 5px;
  border: 1px solid rgb(241, 240, 240);
  border-radius: 5px;
  display: flex;
  cursor: pointer;
}
.left {
  width: 85px;
  padding-top: 10px;
}
.right {
  width: calc(100% - 85px);
  padding-top: 10px;
}
.right > div {
  height: 24px;
  line-height: 28px;
  font-size: 15px;
}
</style>